<template>
  <div>
    <!-- query form -->
    <el-form :model="query" label-position="top">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="退款单号:">
            <el-input v-model="query.refundNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="订单号:">
            <el-input v-model="query.orderNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退款单状态:">
            <el-select v-model="query.status" multiple placeholder="选择退款单状态">
              <el-option v-for="(value, key) in RefundStatus" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" class="no-top-label">
            <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  
    <!-- data table -->
    <el-table :data="page.content" v-loading.body="loading" v-on:sort-change="sort">
      <el-table-column prop="createdOn" label="申请时间" width="175" />
      <el-table-column prop="refundNumber" label="退款单号"/>
      <el-table-column prop="orderNumber" label="订单号"/>
      <el-table-column prop="total" align="center" label="总额">
        <template slot-scope="scope">{{scope.row.total/100|currency('￥')}}
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态" >
        <template slot-scope="scope">
          {{RefundStatus[scope.row.status.toString()]}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" 
            @click="showRefund(scope.row.refundNumber)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" :page-size="page.pageSize" 
      :total="page.totalElements" layout="total, prev, pager, next, jumper" />
  </div>
</template>

<script>
import { Refund } from '@/store/api'
import { RefundStatus } from '@/constants'
import Pagination from '@/utils/pagination'
export default {
  data() {
    return {
      loading: false,
      RefundStatus: RefundStatus,
      page: {
        content: []
      },
      query: {
        status: ['0', '1', '3', '5']
      }
    }
  },
  created() {
    this.loadPage(1)
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.loading = true
      return Refund.list(query).then((data) => {
        this.page = data
        this.loading = false
      })
    },
    showRefund(refundNumber) {
      this.$router.push('/refund/show?refundNumber=' + refundNumber)
    }
  }
}
</script>

<style lang="scss">
.el-table__expanded-cell {
  padding: 8px 50px;
}

.el-select {
  width: 100%;
}

.order-expend .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  label {
    width: 80px;
    color: #8492A6;
    padding: 10px 0;
  }
  .el-form-item__content {
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 160px;
    }
  }
}
</style>
